{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
    <div class="table-responsive py-3 flex">
        <el-button type="primary" size="mini" @click="window.open('/specialTopic/addEnroll')" plain>添加报名企业</el-button>
        <!-- <el-button type="success" size="mini" @click="openRefuseWin()" plain>批量审核</el-button> -->
    </div>
    <div class="table-responsive">
        <el-table ref="tableList" :data="tableData" style="width: 100%;" header-cell-class-name="table-header-DDE6FB"
            @selection-change="()=>{}">
            <el-table-column type="selection" width="55" :selectable="()=>false">
            </el-table-column>
            <el-table-column label="ID" width="100">
                <template slot-scope="scope">
                    {{scope.row.id}}
                </template>
            </el-table-column>
            <el-table-column label="专题名称" width="260">
                <template slot-scope="scope">
                    <a :href="`/specialTopic/saveRecruit/${scope.row.special_id}`"
                        target="_blank">{{scope.row.special_title}}</a>
                </template>
            </el-table-column>
            <el-table-column label="报名企业" width="260">
                <template slot-scope="scope">
                    {{scope.row.company_name}}
                </template>
            </el-table-column>
            <el-table-column label="排序权重">
                <template slot-scope="scope">
                    <div>
                        <el-input-number size="small" :dada="scope.row" v-model="scope.row.sort"
                            @change="saveEnrollSort(scope.row)"></el-input-number>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="专题状态">
                <template slot-scope="scope">
                    <el-tag size="small" type="success">启用</el-tag>
                    <el-tag size="small" type="info" v-else-if="scope.row.status == 2">禁用</el-tag>
                    <el-tag size="small" type="info" v-else>未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="过期状态">
                <template slot-scope="scope">
                    <el-tag size="small" type="warning" v-if="isExpire(scope.row) == 0">快了</el-tag>
                    <el-tag size="small" type="success" v-else-if="isExpire(scope.row) == 1">有效</el-tag>
                    <el-tag size="small" type="info" v-else>过期</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="审核状态">
                <template slot-scope="scope">
                    <el-button size="minism" :type="scope.row.status == 1 ? 'success' : 'info'"
                        @click="examine(scope.row)">{{scope.row.status == 1?'启用':'禁用'}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" plain round type="danger" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name='script'}
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                view: XYBase.view,
                labelPosition: 'right',
                defaultProps: {
                    value: 'id',
                    label: 'title',
                    children: 'data',
                    checkStrictly: true
                },
                search: {
                    status,
                    page: 1,
                    status: null,
                    total: 0,
                    pageSize: 10
                },
                tableData: []
            }
        },
        methods: {
            examine(row) {
                let status = row.status == 1 ? 0 : 1;
                $.ajax({
                    type: 'POST',
                    url: '/specialTopic/saveEnroll',
                    data: {
                        id: row.id,
                        status
                    },
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            row.status = status;
                        }
                    }
                });
            },
            remove(row) {
                let _this = this;
                this.$confirm(`删除${row.company_name}的专题招聘报名`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        type: 'POST',
                        url: '/specialTopic/removeEnroll',
                        data: {
                            id: row.id,
                            status: status == 1 ? 1 : 2,
                        },
                        success(res) {
                            if (res.code != undefined && res.code == 0) {
                                XYBase.success('已删除');
                            } else {
                                XYBase.error(res.msg != undefined ? res.msg : XYBase.config.system_network_error);
                            }
                            _this.initHtml();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
            saveEnrollSort(row) {
                $.ajax({
                    type: 'POST',
                    url: '/specialTopic/saveEnroll',
                    data: {
                        id: row.id,
                        sort: row.sort,
                    },
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            XYBase.success('已调整权重值');
                        }
                    }
                })
            },
            initHtml() {
                var _this = this;
                _this.search.ajax = true;
                $.ajax({
                    url: '',
                    type: 'get',
                    data: _this.search,
                    dataType: 'json',
                    error: function (err) {
                        _this.search.ajax = false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (res) {
                        console.log(res);
                        _this.search.ajax = false;
                        if (res) {
                            if (res.code == 0) {
                                _this.search.total = res.data.total;
                                _this.tableData = res.data.data;
                            } else {
                                XYBase.msg(res.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            },
            isExpire(row) {
                if (row.end_time == undefined) {
                    return 2;
                }
                let end = row.end_time;
                let now = Math.round(new Date().getMilliseconds());
                let time = end - now;
                // 过期时间大于12个小时
                if (time > 43200) {
                    return 1;
                } else if (time < 1) {
                    return 2;
                }
                return 0;
            }
        },
        created() {
            XYBase.created(this);
        },
        mounted() {
            this.initHtml();
        },
    });
    $(function () {
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}